<template>
	<view class="content">
		<view class="tag-container">
			<u-tabs :list="validateList" lineColor="rgb(96,114,255)" :scrollable="false"
				inactiveStyle="color: 'rgba(0, 0, 0, 0.5)" lineWidth="25" lineHeight="3"
				@change="chooseTagList($event)">
			</u-tabs>
		</view>
		<view class="body-content">
			<view class="form-bg">
				<u--form labelPosition="left" ref="baseInfoForm" labelWidth="87">
					<u-form-item prop="baseInfo.bankCardNo" borderBottom ref="bankCardNoItem">
						<u--input border="none" type="number" inputAlign="left" clearable fontSize="13" maxlength="32"
							disabled disabledColor="#fff" v-model="form.data" />
					</u-form-item>
					<u-form-item prop="baseInfo.bankName" ref="bankNameItem" v-if="current == 2">
						<u-input type="digit" border="none" placeholder="请输入回填金额" inputAlign="left" clearable
							fontSize="13" maxlength="6">
							<template slot="suffix">
								<u-code ref="uCode" @change="checkMoneyChange" seconds="60"
									changeText="X秒重新获取"></u-code>
								<u--text :text="checkMoneyTips" slot="prefix" @tap="sendCode" type="tips"></u--text>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item prop="baseInfo.bankName" ref="bankNameItem" v-if="current == 1">
						<u-input type="number" border="none" placeholder="请输入短信验证码" inputAlign="left" clearable
							fontSize="13" maxlength="6">
							<template slot="suffix">
								<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
								<u--text slot="prefix" @tap="sendCode" :text="tips" type="tips"></u--text>
							</template>
						</u-input>
					</u-form-item>
				</u--form>
			</view>
			<view class="btn">
				<u-button type="primary" text="提交" :customStyle="nextStepBtnCustomStyle" @click="submit()"></u-button>
			</view>
			<view class="look-problem">
				<view class="u-flex-center u-m-b-30">
					<u-icon name="warning-fill" color="rgb(255, 166, 64)" size="24"></u-icon>
					<view class="text-problem">注意问题</view>
				</view>
				<view class="u-m-b-16">
					1.验证手机号需是<text class="bg-red u-p-3">法人手机号</text>。（【企业/个体】验证法人本人手机号，【自然人】验证银行卡持有人手机号）
				</view>
				<view class="u-m-b-16">
					2.三要素（<text class="bg-red u-p-3">身份证，手机号，银行卡</text>）均为同一人
				</view>
				<view class="u-m-b-16">
					3.银行卡验证<text class="bg-red u-p-3">六小时</text>内只能发送一次，请必要确认金额是否正确！
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseStaticFileUrl: this.$configPath.staticFileUrl,
				current: 1,
				tips: '获取验证码',
				checkMoneyTips: '获取回填金额',
				value: '',
				nextStepBtnCustomStyle: {
					width: '690rpx',
					height: '88rpx',
					borderRadius: '120px',
					color: '#fff',
					margin: '14rpx auto 0rpx',
				},
				form: {
					data: ''
				},
				merchantParameter: {
					contactMobile: '',
					bankCardNo: '',
				},
				validateList: [{
					name: '手机号验证',
				}, {
					name: '银行卡验证',
				}, ],

				$payCompanyEnum: this.$payCompanyEnum,
			}
		},
		onLoad(options) {
			this.merchantParameter = JSON.parse(decodeURIComponent(options.merchant));
			if (this.current == 1) {
				this.form.data = this.merchantParameter.contactMobile;
			} else {
				this.form.data = this.merchantParameter.bankCardNo;
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},

			checkMoneyChange(text) {
				this.checkMoneyTips = text.replaceAll("验证码", "回填金额");
			},

			// 获取验证码或验证金额
			sendCode() {
				let _title = '';
				let _successTitle = '';
				if (this.current == 1) {
					if (this.$u.test.isEmpty(this.merchantParameter.contactMobile)) {
						getApp().err("手机号丢失，请返回上一页再次进入");
						return
					}
					_title = '正在获取验证码';
					_successTitle = '验证码已发送';
				} else if (this.current == 2) {
					if (this.$u.test.isEmpty(this.merchantParameter.bankCardNo)) {
						getApp().err("银行卡号丢失，请返回上一页再次进入");
						return
					}
					_title = '正在获取验证金额';
					_successTitle = '验证金额已发送';
				} else {
					getApp().err("菜单下标丢失");
					return
				}

				if (!this.$refs.uCode.canGetCode) {
					getApp().err("等待倒计时结束后再发送");
					return;
				}

				uni.showLoading({
					title: _title,
					mask: true
				});
				let body = {
					merchantId: this.merchantParameter.merchantId,
					phone: '',
					bankCardNo: '',
					authTypes: this.current,
					payCompanyCode: this.$payCompanyEnum.YEAHKA,
				}

				if (this.current == 1) {
					body.phone = this.merchantParameter.contactMobile;
				} else {
					body.bankCardNo = this.merchantParameter.bankCardNo;
				}

				this.$api('merchant.sendCodeByApplet', body).then(res => {
					uni.hideLoading();
					if (res.status == 0) {
						this.$helpers.toast("发送成功", 'success', 3000, true, () => {});
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					} else {
						getApp().err('获取不成功，' + res.msg);
					}
				}).catch(() => {
					uni.hideLoading();
				});
			},

			chooseTagList(e) {
				this.current = e.index + 1
				this.form.data = this.current == 1 ? this.merchantParameter.contactMobile : this.merchantParameter
					.bankCardNo
			},

			submit() {

				let msg = '';
				if (this.current == 1) {
					if (this.$u.test.isEmpty(this.merchantParameter.contactMobile)) {
						getApp().err("手机号丢失，请返回上一页再次进入");
						return
					}
					msg = '验证码';
				} else if (this.current == 2) {
					if (this.$u.test.isEmpty(this.merchantParameter.bankCardNo)) {
						getApp().err("银行卡号丢失，请返回上一页再次进入");
						return
					}
					msg = '回填金额';
				} else {
					getApp().err("菜单下标丢失");
					return
				}

				if (this.$u.test.isEmpty(this.form.data)) {
					getApp().err("请输入" + msg);
					return
				}

				let body = {
					merchantId: this.merchantParameter.merchantId,
					data: this.form.data,
					authTypes: this.current,
					bankCardNo: this.merchantParameter.bankCardNo,
					phone: this.merchantParameter.contactMobile,
					payCompanyCode: this.$payCompanyEnum.YEAHKA,
				}
				this.$api('merchant.codeVerifyByApplet', body).then(res => {
					if (res.status == 0) {
						this.$helpers.toast("认证成功", 'success', 3000, true, () => {
							uni.navigateBack({
								delta: 1
							})
						});
					} else {
						getApp().err('验证不成功，请切换其他方式验证。原因：' + res.msg);
					}
				}).catch(() => {
					uni.hideLoading();
				});

			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-form-item__body {
		padding: 36rpx 26rpx !important;
	}

	/deep/ .u-text__value--tips {
		color: #6072FF !important;
		font-size: $f-sm !important;
	}

	.content {
		.tag-container {
			background-color: white;
		}

		.body-content {
			margin: 20rpx 24rpx 0rpx;

			.form-bg {
				background-color: white;
				border-radius: 20rpx;
			}
		}

		.btn {
			margin-top: 76rpx;
		}

		.look-problem {
			margin-top: 165rpx;
			font-size: $f-sm;
			color: rgba(0, 0, 0, 0.7);
			line-height: 40rpx;

			.text-problem {
				font-size: 30rpx;
			}

			.bg-red {
				color: rgb(230, 45, 45);
				background-color: #FFEBEC;
			}
		}
	}
</style>